<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const Comp = shallowRef(null)
const loading = ref(true)

const goBack = () => router.back()

onMounted(async () => {
  const id = route.query.id
  if (!id) {
    loading.value = false
    return
  }
  try {
    Comp.value = (await import(`./apis/${id}.detail.vue`)).default
  } catch (e) {
    Comp.value = null
  }
  loading.value = false
})
</script>

<template>
  <div class="bg-gray-100 min-h-screen bg-white">
    <van-nav-bar title="API 详情" left-arrow @click-left="goBack" />
    <div v-if="loading" class="p-6 text-center text-gray-400">加载中...</div>
    <component v-else-if="Comp" :is="Comp" />
    <div v-else class="p-6 text-center text-red-400">未找到该 API 的详细信息</div>
  </div>
</template>

<route>
  {
    path: '/docs/detail',
    name: 'docs-detail',
    meta: {
      title: 'API 详情',
      hideTabbar: true,
      showNavBar: false,
    }
  }
</route>
